<!-- element plus 图标 -->
<template>
    <div class="container">
        <el-input 
        v-model="searchKey" 
        placeholder="请输入图标名称" 
        :suffix-icon="ElementPlusIcons.Search"></el-input>
        <el-row class="icon-box">
            <el-col 
            :sm="24"
            :md="12"
            :lg="8"
            v-for="(item, index) in iconList" 
            :key="index"
            class="icon-item">
                <el-row type="flex" class="icon-item-box" @click="iconItemClick(item)">
                    <el-icon size="18px">
                        <component :is="item" :index="index"></component>
                    </el-icon>
                    <div>{{ item }}</div>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import * as ElementPlusIcons from '@element-plus/icons-vue'; // 图标
import { findSubstrings } from '@/utils/tools-util';
// ========================= 组件可接收的值 =========================
const iconInfo = defineProps({
    
})

// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
})

// ========================= 实列挂载之后调用 =========================
onMounted(() => {
    iconList.value = getIconData();
});

// ========================= 数据操作 =========================
// 图标数据
const iconList = ref([]);
function getIconData() {
    let icons = [];
    for(let iconName in ElementPlusIcons) {
        icons.push(iconName)
    };
    return icons;
};

// 搜索
let searchKey = ref('');
watch(() => searchKey.value , (newVal, oldVal) => {
    if(newVal === '') {
        iconList.value = getIconData();
        return
    };
    let filterList = findSubstrings(getIconData(), newVal);
    iconList.value = filterList;
});

// 图标点击
function iconItemClick(name) {
    emits('iconItemClick', name);
};

// ========================= 定义发射给父组件的方法 =========================
const emits = defineEmits(['iconItemClick'])
// 向外暴露属性或方法
defineExpose({
    searchKey
})
</script>

<style lang="scss" scoped>
.container {
    .icon-box {
        max-height: 400px;
        overflow: auto;
        margin-top:10px;
        .icon-item {
            .icon-item-box {
                padding: 5px;
                cursor: pointer;
                border-radius: 3px;
            }
            .icon-item-box:hover {
                background-color: #ececec;
                transition: background-color .2s;
            }
        }
    }
}
</style>